/**
 * Created by caosh on 2018/5/13 0013.
 */
var SeparateAccountsTemplate = new Vue({
    el: '#separate_accounts-template',
    computed: {
        compTempList: function () {
            var list = [];

            for (var i=0, len=this.tempList.length; i<len; i++) {
                var temp = this.tempList[i],
                    payees = temp.payees,
                    payeeArr = [],
                    obj = {
                        'tempId': temp.tempId,
                        'tempName': temp.tempName,
                        'remark': temp.remark,
                        'items': temp.items
                    };


                for (var j=0, l=payees.length; j<l; j++) {
                    var payee = payees[j];
                    payeeArr.push(payee.userId+payee.percent+'%');
                }

                obj.payeeStr = payeeArr.join(',');

                list.push(obj);
            }

            return list;
        }
    },
    data: {
        tempList: [],
        isShowDetail: false,
        temp: {
            'tempId': '',
            'tempName': '',
            'payees': [],
            'remark': '',
            'items': ''
        },
        total: 0
    },
    methods: {
        getTempList: function () {
            var _this = this;
            _this.setAjaxOptions('/getTempList', null, function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    _this.tempList = result.data;
                } else {
                    console.log(result.errMsg);
                }
            });

            _this.doAjax();
        },
        openEdit: function (tempId) {
            if (!this.isShowDetail) {
                this.temp = this.getTempById(tempId);
                this.isShowDetail=!this.isShowDetail;
            }
            Vue.useLayerForm();
        },
        openAdd: function () {
            if (!this.isShowDetail) {
                this.temp = {
                    'tempId': '',
                    'tempName': '',
                    'payees': [],
                    'remark': '',
                    'items': ''
                };
                this.isShowDetail=!this.isShowDetail;
            }
            Vue.useLayerForm();
        },
        getTempById: function (tempId) {
            var temp = null;
            for (var i=0, len=this.tempList.length; i<len; i++) {
                var t = this.tempList[i];
                if (t.tempId == tempId) {
                    temp = t;
                    break;
                }
            }

            if (temp == null) {
                temp = {
                    'tempId': tempId,
                    'tempName': '',
                    'payees': [],
                    'remark': '',
                    'items': ''
                };
            }

            return temp;
        },
        saveTemp: function () {
            if (!this.checkTemp()) {
                return;
            }

            if (this.temp.tempId == '') {
                this.doSaveTemp('/addTemp');
            } else {
                this.doSaveTemp('/editTemp');
            }
        },
        doSaveTemp: function (url) {
            var _this = this;
            _this.setAjaxOptions(url, _this.temp, function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    console.log('success');
                    _this.isShowDetail = false;
                } else {
                    console.log(result.errMsg);
                }
            });
            _this.doAjax();
        },
        checkTemp: function () {
            var valid = true,
                payees = this.temp.payees;

            this.resetClassObj();

            if (this.temp.tempName.length == 0) {
                this.changeStatus(['template', 'tempName'], 'isError');
                valid = false;
            }

            for (var i=0, l=payees.length; i<l; i++) {
                var payee = payees[i];
                if (payee.userId.length==0 || payee.percent.length==0) {
                    this.changeStatus(['template', 'payees'], 'isError');
                    valid = false;
                    break;
                }
            }

            return valid;
        },
        resetClassObj: function () {
            this.status.template.payees = {
                isActive: false,
                isFinish: false,
                isError: false
            };

            this.status.template.tempName = {
                isActive: false,
                isFinish: false,
                isError: false
            };
        },
        deletePayee: function (payee) {
            var index = this.temp.payees.indexOf(payee);
            this.temp.payees.splice(index, 1);
        }
    },
    mixins: [AjaxMixin, StatusMixin, UserMixin],
    mounted: function () {
        Vue.useLayerElement();
        this.getTempList();
    },
    watch: {
        temp: {
            handler: function (val, oldVal) {
                var payees = val.payees;
                this.total = 0;
                for (var i=0; i<payees.length; i++) {
                    this.total += payees[i].percent;
                }

                if (val.tempName.length>20) {
                    this.temp.tempName = val.tempName.substring(0, 20);
                }
            },
            deep: true
        },
        isShowDetail: function (val, oldVal) {
            if (!val) {
                this.getTempList();
            }
            this.resetClassObj();
        }
    }
});